<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <h1>CSS 样式权重 </h1>

    <h2>参考链接</h2>
    <ul>
        <li><a target="_blank" href="https://juejin.im/post/5ca1b5216fb9a05e181de1c0">CSS权重</a></li>
        <li><a target="_blank" href="https://juejin.im/post/5afa98bf51882542c832e5ec">你对CSS权重真的足够了解吗？</a></li>
        <li><a target="_blank" href="http://www.standardista.com/css3/css-specificity/">CSS Specificity</a></li>
    </ul>

    <h3>摘抄</h3>
    <h4>权重的等级</h4>
    <p>!important > 内联样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符</p>
    <h4>权重值的大小</h4>
    <ul>
        <li>!important: 无穷大</li>
        <li>内联样式: 1000</li>
        <li>ID: 100</li>
        <li>类、伪类、属性: 10</li>
        <li>元素、伪元素: 1</li>
        <li>通配符: 0</li>
    </ul>
    <p>需要注意的是，这种计算方式只是为了便于理解而使用的方法，它并不一定准确。</p>


    <h4>权重的基本规则</h4>
    <ul>
        <li>拥有更高权重等级的css权重更高</li>
        <li>拥有同样权重等级情况下, 权重值大的css生效</li>
        <li>拥有同样权重等级、且权重值相同的情况下, 以后面出现的选择器为最后规则</li>
        <li>拥有同样权重等级、且权重值相同的情况下, 与元素距离近的选择器生效</li>
    </ul>

    <h4>示例图</h4>
    <a target="_blank" href="http://www.standardista.com/css3/css-specificity/"><img src="./img/specificityimg.png" width="100%"></a>

    <h4>示例图解</h4>

    <ul>
        <li>图1，为1个通配符，通配符不影响权重计算，故为0-0-0</li>
        <li>图2，为1个元素，为0-0-1</li>
        <li>图3，为2个元素，优先级大于图2，为0-0-2</li>
        <li>图4，为12个元素，优先级大于图3， 为0-0-12</li>
        <li>图5，为1个类, 类的权重等级大于元素，故优先级大于图4，为0-1-0</li>
        <li>图6，为1个类+1个通配符，通配符不影响权重计算, 故权重与图5一致，优先级取决于先后顺序，为0-1-0</li>
        <li>图7，为1个属性选择器，属性选择器与类的权重等级一致、权重值一致，故权重与图6、图5一致，优先级取决于先后顺序，为0-1-0</li>
        <li>图8，为1个伪类, 伪类与属性、类的权重等级一致、权重值一致，故权重与图7、图6、图5一致，优先级取决于先后顺序，为0-1-0</li>
        <li>图9，为1个类+1个元素，图9权重等级与图8一致，但是权重值多1个元素，故优先级大于图8，为0-1-1</li>
        <li>图10，为1个属性+1个元素, 权重与图9一致，优先级取决于先后顺序，为0-1-1</li>
        <li>图11，为1个伪类+2个元素, 优先级大于图10，为0-1-2</li>
        <li>图12，为1个属性+2个元素, 权重与图11一致，优先级取决于先后顺序，为0-1-2</li>
        <li>图13，为1个类+1个伪类+1个元素, 图13权重等级与图12一致，但是权重值更大，故优先级大于图12，为0-2-1</li>
        <li>图14，为1个属性+1个类+1个元素, 权重与图13一致，优先级取决于先后顺序，为0-2-1</li>
        <li>图15, 为10个（类、属性、伪类）, 图15权重等级与图14一致，但是权重值更大，故优先级大于图14，为0-10-0</li>
        <li>图16，为1个ID， 权重等级高于图15，故优先级大于图15，为1-0-0</li>
        <li>图17，为1个ID + 2个（类、属性）+ 2个元素，故优先级大于图16，为1-2-2</li>
        <li>图18，为2个ID + 1个属性, 故优先级大于图17，为2-0-1</li>
        <li>图19, 为内联样式，权重等级大于图18，故优先级大于图18，为1-0-0-0</li>
        <li>图20，为!important，权重等级大于图19，故优先级大于图19，为1-0-0-0-0</li>
    </ul>

</body>

</html>